<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <template #header>
      <div>
        <span>分配调解时间</span>
      </div>
    </template>
    <div class="table-container">
      <el-table :data="cases" border stripe style="width: 100%" height="400">
        <el-table-column prop="caseId" label="案件编号" width="180">
        </el-table-column>
        <el-table-column prop="applicant.name" label="申请人">
        </el-table-column>
        <el-table-column prop="respondent.name" label="被申请人">
        </el-table-column>
        <el-table-column label="调解人">
          <template #default="scope">
            {{ Case.getMediatorName(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间" width="180">
        </el-table-column>

        <!-- show-overflow-tooltip> -->

        <el-table-column label="操作" width="420">
          <template #default="scope">
            <el-button type="success" @click="assignTimeDialog.look(scope.row)">分配时间</el-button>
            <el-button type="primary" @click="detailedCase.look(scope.row)">详细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>


  <DetailedCase v-model="detailedCase.visible" :case="detailedCase.case" :case-id="detailedCase.caseId"></DetailedCase>
  <el-dialog :title="'分配时间'" v-model="assignTimeDialog.visible" style="width: 400px;">
    <el-date-picker v-model="assignTimeDialog.time" type="datetime" placeholder="选择调解时间" 
      format="YYYY-MM-DD HH:mm"
      value-format="YYYY-MM-DD HH:mm:ss">
    </el-date-picker>
    <el-button style="margin-left: 15px;" type="success" @click="assignTimeDialog.submit()">确定</el-button>

  </el-dialog>
</template>

<script setup lang="ts">
import DetailedCase from '@/compontent/detailedCase.vue';
import { getCaseByCaseStatus } from '@/axios/case/caseReq';
import { assignMediationTime } from '@/axios/case/caseReq';
import { Case, CaseStatus } from '@/types/response/case';
import { reactive, ref } from 'vue';
import Mediator from '@/types/response/mediator';
import { getAllMediators, getMediatorById } from '@/axios/mediator/mediatorReq';
import Notice from '@/utils/notice';
let detailedCase = ref({
  look: (c: Case) => {
    detailedCase.value.caseId = c.caseId;
    detailedCase.value.case = c;
    detailedCase.value.visible = true;
  },
  visible: false,
  caseId: null,
  case: null
});
let cases = ref<Case[]>([]);
let mediators = ref<Mediator[]>();
// 新增处理分配时间的方法
async function handleAssignTime(row) {
  try {
    await assignMediationTime(row.caseId, row.mediationTime)
    row.timeConfirmed = true // 标记该行时间已确认
    this.$message.success('调解时间分配成功')
  } catch (error) {
    this.$message.error('调解时间分配失败')
    console.error(error)
  }
};
let assignTimeDialog = reactive({
  case: null,
  visible: false,
  time: "",
  look(c: Case) {
    assignTimeDialog.case = c;
    assignTimeDialog.visible = true;
  },
  submit() {
    let c = assignTimeDialog.case;
    assignMediationTime(c.caseId, assignTimeDialog.time).then(res => {
      if (res) {
        Notice.success("分配成功");
        cases.value.splice(cases.value.indexOf(c), 1);
      }
      else{
        Notice.error("分配失败");
      }
    })
    assignTimeDialog.visible = false;
  },
})
function init() {
  getCaseByCaseStatus(CaseStatus.waitOrder).then(res => {
    if (res instanceof Array) {
      cases.value = res.filter(item => item.isRelated == 1);
    }
  })
  getAllMediators().then(res => {
    mediators.value = res;
  })
}
init();


</script>

<style scoped>
.table-container {
  padding: 20px;
}

.el-select {
  margin-right: 10px;
}

.el-button+.el-button {
  margin-left: 10px;
}
</style>